<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到英雄联盟</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.min.css" />
</head>

<body>
    <div id="app">
        <div class="el_toubu">
            <div class="lol_menu">
                <div class="menu_content">
                    <div class="menu-wrapper"></div>
                </div>
                <div class="juzhong">
                    <img class="txt_logo" alt="">
                    <ul class="menu_list">
                    </ul>
                    <div class="usr-control">
                        <i class="btn-search icon-sprite"></i>
                        <i class="btn-phone icon-sprite"></i>
                        <i class="btn-login icon-sprite">
                            <img class="btn-login-default"
                                src="https://game.gtimg.cn/images/lol/v2/personal/avatar/default.png" alt="">
                        </i>
                        <span class="login-tip"> 亲爱的召唤师，欢迎<a id="click">登录</a> </span>
                    </div>
                </div>
            </div>
            <div class="top-bg-wrapper"><img class="top_bg1" alt=""></div>
            <div class="btn-chakan icon-sprite">
                <a type="fill" href="javascript:void(0)"></a>
            </div>
        </div>
        <div class="el-body">
            <div class="swiper">
                <div id="hero-swiper" class="simple-swiper-container">
                    <div class="swiper-wrapper"></div>
                </div>
                <div class="tab-btn"></div>
            </div>
            <div class="m-news">
                <div class="part-top-tab">
                    <div class="part-tab-title tab-selected">
                        综合
                    </div>
                    <div class="part-tab-title">
                        公告
                    </div>
                    <div class="part-tab-title">
                        赛事
                    </div>
                    <div class="part-tab-title">
                        攻略
                    </div>
                    <div class="part-tab-title">
                        社区
                    </div>
                </div>
                <div class="news-content">
                    <div class="news-list">
                        <ul class="news_wrapper">
                            <div class="first">
                                欢迎来到英雄联盟！！
                            </div>
                        </ul>
                        <ul class="news_wrapper">
                            <div class="first">
                                欢迎来到英雄联盟！！
                            </div>
                        </ul>
                        <ul class="news_wrapper">
                            <div class="first">
                                欢迎来到英雄联盟！！
                            </div>
                        </ul>
                        <ul class="news_wrapper">
                            <div class="first">
                                欢迎来到英雄联盟！！
                            </div>
                        </ul>
                        <ul class="news_wrapper">
                            <div class="first">
                                欢迎来到英雄联盟！！
                            </div>
                        </ul>
                    </div>
                    <div class="show-more">
                        阅读更多最新资讯->
                    </div>
                </div>
            </div>
        </div>
        <!-- 热门活动 -->
        <div class="el-body animate-fade" type="test">
            <div class="left-huodong">
                <div class="inline-layout ">
                    <p class="card-title"> 热门活动 </p>
                    <div class="tab-list-activity bottom-cut-line"></div>
                    <p class="card-title-more"><a type="theme" onclick="message('你干嘛哈哈哎哟！')">更多--></a> </p>
                </div>
                <div class="tab-list-activity-wrapper">
                </div>
            </div>
            <div class="game-download">
                <div type="button" class="btn-down" title="点击下载完整客户端">
                    <video autoplay loop muted src="img/btn-download.mpeg"></video>
                </div>
                <div class="v-button">
                    <div type="button" class="btn-new-player">
                        新手指引
                    </div>
                    <div type="button" class="btn-new-player">
                        领取中心
                    </div>
                </div>
                <div class="service-list">

                </div>
            </div>
        </div>
        <div class="el-body animate-fade" type="test"> 
            <div class="inline-layout ">
                <p class="card-title"> 最新视频 </p>
                <div class="tab-list-video bottom-cut-line"></div>
                <p class="card-title-more"><a type="theme">更多></a> </p>
            </div>
            <div id="video-card">

            </div>
        </div>
        <!-- 英雄资料卡片 -->
        <div class="el-body animate-fade" type="test">
            <div class="inline-layout ">
                <p class="card-title"> 英雄资料 </p>
                <div class="tab-list-hero bottom-cut-line"></div>
            </div>
            <div id="hero-list">
                <div class="hero-inner-list swiper-wrapper"></div>
            </div>
        </div>

        <div class="empty-style">
            <div class="leader-button">
                <span class="el-button">
                    <a href="javascript:void(0)" class="header-icon huodong"></a>
                    热门活动
                </span>
                <span class="el-button">
                    <a href="javascript:void(0)" class="header-icon shipin"></a>
                    视频中心
                </span>
                <span class="el-button">
                    <a href="javascript:void(0)" class="header-icon saishi"></a>
                    赛事中心
                </span>
                <span class="el-button">
                    <a href="javascript:void(0)" class="header-icon ziliao"></a>
                    英雄资料
                </span>
                <span class="el-button" id="back-top">
                    <a href="javascript:void(0)" class="header-icon to-top"></a>
                    返回顶部
                </span>
            </div>
        </div>
    </div>
    <script src="lib/swiper.js"></script>
    <script src="lib/jquery-3.6.0.min.js"></script>
    <script src="js/lol.config.js"></script>
    <script src="lib/swiper@8.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>